<template>
	<view class="wrap">
		<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
			<u-form-item :label-position="labelPosition" label="群名称" prop="name" label-width="120">
			    <u-input placeholder="请输入群名称" v-model="model.name" type="text"></u-input>
			</u-form-item>
			<u-form-item :label-position="labelPosition" label="简介" prop="intro" label-width="120">
				<u-input type="textarea" placeholder="请填写简介" v-model="model.intro" />
			</u-form-item>
			<u-form-item :label-position="labelPosition" label="群图标" prop="icon" label-width="120">
				<u-upload ref="uUpload" :show-progress="false" :auto-upload="true" width="160" height="160" :action="action" :header="upHeader" :max-size="5 * 1024 * 1024" max-count="1" v-model="model.icon"></u-upload>
			</u-form-item>
		</u-form>
		<u-button :disabled="!isCanSubmit" @click="submit" :style="[inputStyle]" class="button">提交</u-button>
	</view>
</template>

<script>
	import { mapState, mapGetters, mapActions } from 'vuex'
	export default {
		data() {
			return {
				isCanSubmit: true,
				action: this.$config.domain + '/v1/attach/upload',
				upHeader:{},
				model: {
					name: '',
					intro: '',
					icon: ''
				},
				rules: {
					name: [
					    {
							required: true,
							message: '请输入群名称',
							trigger: 'blur' ,
						},
						{
							min: 2,
							max: 8,
							message: '名称长度在2到8个字符',
							trigger: ['change','blur'],
						}
					],
					intro: [
						{
							required: true,
							message: '请填写简介'
						},
						{
							min: 5,
							message: '简介不能少于5个字',
							trigger: 'change' ,
						}
					],
					icon: [
						{
							required: true,
							message: '请选择图标'
						}
					]
				},
				labelPosition: 'left',
				errorType: ['message'],
			}
		},
		created() {
			this.upHeader = {'Authorization':"Bearer " + this.loginInfo.token}
		},
		computed: {
			...mapGetters(['isLogin']),
			...mapState(['loginInfo', 'userInfo']),
			inputStyle() {
				let style = {};
				if (this.model.name) {
					style.color = "#fff";
					style.backgroundColor = this.$u.color['warning'];
				}
				return style;
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			submit() {
				let files = [];
				files = this.$refs.uUpload.lists.filter(val => {
					return val.progress == 100;
				})
				if (files.length > 0) {
					this.model.icon = files[0].response.data[0]
				}
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log("验证成功")
						this.createCommunity()
					} else {
						console.log('验证失败')
					}
				});
			},
			async createCommunity() {
				this.isCanSubmit = false
				let res = await this.$u.api.createCommunity({name:this.model.name, icon:this.model.icon, intro:this.model.intro})
				if (res != '') {
					this.$u.toast(res.message)
				    setTimeout(() => {
						this.$u.route({ type: 'back' })
				    }, 1000)
				} else {
				    setTimeout(() => {
				        this.isCanSubmit = true
				    }, 2000)
				}
			}
		}
	}
</script>

<style scoped lang="scss">
.wrap {
	padding: 30rpx;
	.button {
		margin-top: 20px;
		background-color: rgb(253, 243, 208);
		color: $u-tips-color;
		border: none;
		&::after {
			border: none;
		}
	}
}
</style>